<template>
	<div>
		<div class="First_s">
			<div class="s_ssk">
				<div class="ssk">
					<img src="../assets/jft_but_search.png" />
					<span class="ssk_text">请输入产品名称搜索</span>
				</div>
			</div>
		</div>
		<div class="First_x">
			<div class="dp">
				<img src="../assets/Main/sp1.jpg" alt="">
				<div class="dp_bt">
					<span class="dp_text">沃尔玛</span>
					<div class="dp_text2">
						<span>月售1万+</span>
						<span> 起送￥0</span>
						<span>基础运费￥5</span>
					</div>
					<span class="dp_text3">VIP尊享满89元减4元运费卷(每月3张)</span>
				</div>
			</div>
		</div>
		<div class="x_fl">
			<div class="qb">全部商品</div>
			<p>秒杀</p>
			<p>新鲜水果</p>
			<p>休闲食品</p>
			<p>时令蔬菜</p>
			<p class="jq">肉蛋家禽</p>
		</div>
		<div class="x_sp">
			<img class="tp1" src="../assets/login/spt1.jpg" alt="">
			<div class="x_text">
				<div text_fh>
					<p>番茄250g/份</p>
					<p>月售10件</p>
					<p>￥33.6 </p>
				</div>
				<p class="zk">50</p>
				<div class="tp2">
					<img src="../assets/login/jh.jpg" alt="">
				</div>
			</div>
		</div>
		<div class="x_sp">
			<img class="tp1" src="../assets/login/spt1.jpg" alt="">
			<div class="x_text">
				<div text_fh>
					<p>番茄250g/份</p>
					<p>月售10件</p>
					<p>￥33.6 </p>
				</div>
				<p class="zk">50</p>
				<div class="tp2">
					<img src="../assets/login/jh.jpg" alt="">
				</div>
			</div>
		</div>		
		<div class="x_sp">
			<img class="tp1" src="../assets/login/spt1.jpg" alt="">
			<div class="x_text">
				<div text_fh>
					<p>番茄250g/份</p>
					<p>月售10件</p>
					<p>￥33.6 </p>
				</div>
				<p class="zk">50</p>
				<div class="tp2">
					<img src="../assets/login/jh.jpg" alt="">
				</div>
			</div>
		</div>
		<div class="bottom_div">
			<img src="../assets/login/gwc1.jpg" />
		  <div class="tab_div">总计<span>￥128</span> <button>去结算</button></div>
		</div>
	</div>

</template>

<script>
</script>

<style>
	.bottom_div img{
		height: 26px;
		width: 28px;
		margin-left: 24px;
	}
	.tab_div span{
		color: red;
	}
	.bottom_div {
	  background:#ffffff;
	}
	.bottom_div .tab_div {
	  text-align: start;
	  height: 49px;
	  line-height: 49px;
	  margin-left: 24px;
	  font-size: 14px;
	  color: #333333;
	}
	.tab_div button {
	  float: right;
	  line-height: 49px;
	  background-color: #4fb0f9;
	  color: white;
	  border: none;
	  text-align: end;
	  padding-right: 22px;
	  width: 98px;
	}
	.zk{
		margin-left:px;
		margin-top: 49px;
		margin-left: -35px;
		margin-right: 100px;
		text-decoration: line-through;
		font-size: 10px;
		color: #999999;
	}
	.tp2{
		width: 300px;
		margin-top: 48px;
	}
	.tp2 img{
		margin-left:0px;
		float: right;
	}
	.x_text img{
		height: 19.5px;
		width: 19.5px;
	}
	.x_text :nth-child(3){
		color: red;
	}
	.x_text p{
		
		font-size: 14px;
		margin-bottom: 6px;
	}
	.x_text{

		margin-top: 24px;
		margin-left: 16px;
		display: flex;
		float: right;
	}
	.tp1{
		margin-left: 16px;
		margin-top: 24px;
		height: 68px;
		width: 68px;
	}
	.x_sp{
		
		float: left;
	}
	.x_fl :nth-child(2){
		padding-top: 12px;
	}
	.qb{
		font-size: 14px;
		background: #FFFFFF;
		height: 40px;
		width: 76px;
		text-align: center;
	}
	.x_fl p{
		font-size: 14px;
		height: 40px;
		width: 76px;
		text-align: center;
		background-color: #f8f8f8;
	}
	.x_fl{
		margin-top: 16px;
		float: left;
	}
	.dp_text3{
		color: red;
		font-size: 13px;
	}
	.dp_text2 span{
		margin-right: 16px;
	}
	.dp_text2{
		margin-top: 8px;
		margin-bottom: 8px;
		font-size: 13px;
	}
	.dp_text{
		font-size: 16px;
	}
	.dp_bt{
		margin-top: 14px;
		margin-left: 16px;
	}
	.dp img{
		width: 56px;
		height: 56px;
		margin-left: 18px;
		margin-top: 14px;
	}
	.dp{
		display: flex;
	}
	.First_x{
		background-color: #FFFFFF;
	}
	.ssk span{
		font-size: 14px;
		color: #333333;
		margin-left: 12px;
	}
	.ssk img{
		height: 16px;
		width: 16px;
		margin-left: 16px;
		margin-bottom: -3px;
	}
	.s_ssk{
		display: flex;
		align-items: center;
		border-radius: 20px;
		background-color: #F8F8F8;
		margin-left: 18px;
		margin-top: 16px;
		margin-right: 18px;
		height: 32px;
	}
	.First_s{
		background-color: #FFFFFF;
	}
</style>